<template>
  <div class="wrap">
    <el-card class="header-card">
      <div class="item font-bold">
        <p class="font-bold">{{ $t('table.Settlement user') }}：{{data.userAccount}}</p>
        <p class="font-bold" style="width: calc(100% - 100px)">{{ $t('table.Settlement store') }}：{{ accountName }}</p>
        <p>{{ $t('table.Settlement time') }}：{{data.startDate}} - {{data.endDate}}</p>
        <p>{{ $t('table.Total number of stickers') }}：{{data.totalSettleOrderNum}}</p>
        <p>
          <span class="mgr10">{{ $t('table.Total sticker fee') }}：{{data.totalStickerFee}}</span>
          <span class="mgr10">{{ $t('table.Regular sticker fees') }}：{{data.totalSpStickerPrice}}</span>
          <span class="mgr10">{{ $t('table.Continuation cost') }}：{{data.totalStickerAppend}}</span>
          <span class="mgr10">{{ $t('table.Special courier fees') }}：{{data.totalLogisticTypePrice}}</span>
          <span class="mgr10">{{ $t('table.Packaging service fees') }}：{{data.totalPackagePrice}}</span>
        </p>
        <p>{{ $t('table.总货件单数') }}：{{data.totalShipmentNum}}</p>
        <p>
          <span class="mgr10">{{$t('table.总理货费用（元）')}}：{{data.totalShipmentFee}}</span>
          <span class="mgr10">{{$t('table.上架费用（元）')}}：{{data.totalListingFee}}</span>
          <span class="mgr10">{{$t('table.组装费用（元）')}}：{{data.totalCombinationFee}}</span>
          <span class="mgr10">{{$t('散货入仓费用（元）')}}：{{data.totalBulkCargoFee}}</span>
          <span class="mgr10">{{$t('整柜入仓费用（元）')}}：{{data.totalWholeCabinetFee}}</span>
          <span class="mgr10">{{$t('直送费用（元）')}}：{{data.totalFullInWarehouseFee}}</span>
        </p>
        <p>{{ $t('table.总工单数') }}：{{data.totalWorkNum}}</p>
        <p>
          <span class="mgr10">{{ $t('table.总大货中转费用（元）') }}：{{data.totalBigMiddleFee}}</span>
          <span class="mgr10">{{ $t('table.送仓费用（元）') }}：{{data.totalMiddleFee}}</span>
          <span class="mgr10">{{ $t('table.贴外箱标费用（元）') }}：{{data.totalBoxLabelFee}}</span>
          <span class="mgr10">{{ $t('table.包车费用（元）') }}：{{data.totalCarFee}}</span>
          <span class="mgr10">{{ $t('table.调货费用（元）') }}：{{data.totalTransferFee}}</span>
          <span class="mgr10">{{ $t('table.贴SKU标费用（元）') }}：{{data.totalLabelFee}}</span>
        </p>
        <p>{{ $t('table.Total storage cost') }}：{{data.totalStorageFee}}</p>
        <p>{{ $t('table.Summary of expenses') }}：{{data.totalFee}}</p>
      </div>
      <div class="button">
        <div>
          <el-button type="primary" @click="downLoad" :loading="downloadLoading">{{$t('data.Download settlement statement')}}</el-button>
        </div>
        <div class="mgt10">
          <el-button type="success" v-if="data.status === 0" @click="finishPayment"  :loading="btnLoading">{{$t('data.Mark settled')}}</el-button>
          <el-button type="warning" v-if="data.status === 1" @click="resetPayment" :loading="btnLoading">{{$t('data.Mark Unsettled')}}</el-button>
        </div>
      </div>
    </el-card>
    <div>
      <h4>{{$t('data.order details')}}</h4>
      <div class="table">
        <el-table
          :data="paymentOrders"
          :border="true"
          v-loading="loading"
          show-summary
          :summary-method="getSummaries1"
        >
          <el-table-column
            prop="orderId"
            :label="$t('table.orderId')"
            align="center"
            min-width="200"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="accountType"
            :label="$t('table.platform')"
            align="center"
            min-width="150"
            v-if="$store.getters.platformNum > 1"
          >
          </el-table-column>
          <el-table-column
            prop="userAccount"
            :label="$t('table.user name')"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="showName"
            :label="$t('table.store')"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="SKU"
            label="SKU"
            align="center"
            min-width="200"
          >
            <template slot-scope="{row}">
              <div v-for="skuItem in row.skuData" :key="skuItem.sku">
                {{skuItem.sku}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="SKUNum"
            label="SKU数量"
            align="center"
            min-width="120"
          >
            <template slot-scope="{row}">
              <div v-for="skuItem in row.skuData" :key="skuItem.sku">
                {{skuItem.num}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.productQuantity')"
            prop="num"
            align="center"
            min-width="120"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Sticker fee')"
            prop="stickerPrice"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Regular sticker fees')"
            prop="spStickerPrice"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Continuation cost')"
            prop="stickerAppend"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Special courier fees')"
            prop="logisticTypePrice"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Packaging service fees')"
            prop="packagePrice"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('order.orderTime')"
            prop="createdDate"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.placementTime')"
            prop="stickerTime"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column
            :label="$t('table.Completion/Cancellation/Return Time')"
            prop="finishDate"
            align="center"
            min-width="150"
          >
            <template slot-scope="{row}">
              {{ row.refundDate || row.cancelDate || row.finishDate || '-'}}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size.sync="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100, 500, 1000]"
          :total="orderTotal"
          @size-change="handleSizeChange"
          @current-change="getPaymentOrder"
          style="margin-top: 10px"
        >
        </el-pagination>

      </div>
    </div>

    <div>
      <h4>{{$t('data.理货明细')}}</h4>
      <div class="table">
        <el-table
          :data="paymentShipment"
          :border="true"
          show-summary
        >
          <el-table-column
            prop="shipmentNo"
            :label="$t('table.shipmentNumber')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userAccount"
            :label="$t('table.user name')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.箱子数量')"
            prop="boxNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.SKU数量')"
            prop="skuNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.productQuantity')"
            prop="goodsNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.上架费用（元）')"
            prop="listingFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.组装费用（元）')"
            prop="listingFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="入仓费用（元）"
            prop="inWarehouseFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="直送费用（元）"
            prop="fullInWarehouseFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="confirmTime"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <h4>{{$t('data.送仓明细')}}</h4>
      <div class="table">
        <el-table
          :data="paymentMiddle"
          :border="true"
          show-summary
        >
          <el-table-column
            prop="workNo"
            :label="$t('table.送仓单号')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userAccount"
            :label="$t('table.user name')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.store')"
            prop="showName"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('table.SKU数量')"
            prop="skuNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.productQuantity')"
            prop="goodsNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.送仓费用（元）')"
            prop="transfer2warehouse"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.贴外箱标费用（元）')"
            prop="boxLabelFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.包车费用（元）')"
            prop="charteredCarFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.送仓时间')"
            prop="finishTime"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <h4>{{$t('data.调货明细')}}</h4>
      <div class="table">
        <el-table
          :data="paymentTransfer"
          :border="true"
          show-summary
        >
          <el-table-column
            prop="workNo"
            :label="$t('table.调货单号')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userAccount"
            :label="$t('table.user name')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.store')"
            prop="showName"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('table.SKU数量')"
            prop="skuNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.productQuantity')"
            prop="goodsNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.调货费用（元）')"
            prop="totalTransferFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="finishTime"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>



    <div>
      <h4>{{$t('data.贴标明细')}}</h4>
      <div class="table">
        <el-table
          :data="paymentLabel"
          :border="true"
          show-summary
        >
          <el-table-column
            prop="labelNo"
            :label="$t('table.贴标单号')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userAccount"
            :label="$t('table.user name')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.SKU数量')"
            prop="skuNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.productQuantity')"
            prop="goodsNum"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.贴SKU标费用（元）')"
            prop="totalFee"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="finishTime"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>

    </div>

    <div>
      <h4>{{$t('data.Warehouse Details')}}</h4>
      <div class="table">
        <el-table
          :data="paymentStorages"
          :border="true"
          show-summary
          :summary-method="getSummaries2"
          v-loading="storageLoading"
        >
          <el-table-column
            prop="date"
            :label="$t('table.date')"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-for="item in weightRangeList"
            :key="item.rangeId"
            :prop="'detail' + item.rangeId"
            :label="item.weightName + (item.stockField === stockField.stockNum ? `（${$t('个')}）` : `（${$t('箱')}）`)"
            align="center"
          >
            <template v-slot="{row}">
              <template v-if="row['detail' + item.rangeId]">
                <span>{{row['detail' + item.rangeId].calNum}}</span>
              </template>
              <template v-else>
                -
              </template>
            </template>
          </el-table-column>


          <el-table-column
            :label="$t('table.totalStorageCost')"
            prop="totalFee"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="footer">
      <el-button @click="backList">返回</el-button>
    </div>
  </div>

</template>

<script>
import {
  finishPayment,
  getPaymentInfo, getPaymentLabel,
  getPaymentMiddle,
  getPaymentOrder,
  getPaymentPdf, getPaymentShipment, getPaymentTransfer, getSettleStorageList, getStorageStatistics,
  resetPayment
} from "@/api/statistics";
import {deepClone, deepCopy} from "@/utils";
import {stockField} from "@/utils/stock";

export default {
  name: "shipmentInfo",
  data(){
    return {
      data: {},
      id: '',
      paymentOrders: [

      ], // 货件
      paymentStorages: [

      ], // 仓储
      weightRangeList: [], // 重量范围
      paymentMiddle: [],
      paymentTransfer: [],
      paymentLabel: [],

      loading: false,
      btnLoading: false,
      downloadLoading: false,
      queryParams:{
        page: 1,
        pageSize: 10,
      },
      orderTotal: 0,
      orderLoading: false,
      middleLoading: false,
      transferLoading: false,
      labelLoading: false,
      storageLoading: false,
      paymentOrderSumGoodsNum: 0,
      paymentShipment: [], // 理货
      shipmentLoading: false,
      stockField,
    }
  },
  computed:{
    accountName(){
      const accountName = [];
      if(this.data.accountList){
        this.data.accountList.forEach(item=>{
          accountName.push(item.showName)
        })
      }
      return accountName.join('、')
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods:{
    getData(){
      this.getPaymentInfo()
      this.getPaymentOrder()
      this.getPaymentMiddle()
      this.getPaymentTransfer()
      this.getPaymentLabel()
      this.getPaymentShipment()
      this.getPaymentStorages() // 仓储明细
    },
    getPaymentInfo(){
      this.loading = true
      getPaymentInfo(this.id, this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.paymentOrderSumGoodsNum = res.info.paymentOrderSumGoodsNum
        })
    },
    getPaymentShipment(){
      this.shipmentLoading = true
      const params = deepCopy(this.queryParams)
      params.id = this.id
      getPaymentShipment(params)
        .then(res=>{
          this.shipmentLoading = false
          this.paymentShipment = res.data
        })
    },
    getPaymentOrder(){
      this.orderLoading = true
      const params = deepCopy(this.queryParams)
      params.id = this.id
      getPaymentOrder(params)
        .then(res=>{
          this.orderLoading = false
          this.orderTotal = res.info.total
          this.paymentOrders = res.data
        })
    },
    getPaymentMiddle(){
      this.middleLoading = true
      const params = {
        id: this.id,
      }
      params.id = this.id
      getPaymentMiddle(params)
        .then(res=>{
          this.middleLoading = false
          this.paymentMiddle = res.data
        })
    },
    getPaymentTransfer(){
      this.transferLoading = true
      const params = {
        id: this.id,
      }
      params.id = this.id
      getPaymentTransfer(params)
        .then(res=>{
          this.transferLoading = false
          this.paymentTransfer = res.data
        })
    },
    getPaymentLabel(){
      this.labelLoading = true
      const params = {
        id: this.id,
      }
      params.id = this.id
      getPaymentLabel(params)
        .then(res=>{
          this.labelLoading = false
          this.paymentLabel = res.data
        })
    },
    getPaymentStorages(){
      this.storageLoading = true
      const params = {
        paymentId: this.id
      }
      getSettleStorageList(params)
        .then(res=>{
          this.storageLoading = false
          this.paymentStorages = res.data
          this.weightRangeList = res.info.weightRangeList
        })
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.page = 1;
      this.getPaymentOrder();
    },
    finishPayment(){
      this.$warning(this.$t('data.settlementText1'),{
        title: this.$t('data.settlement')
      })
        .then( () => {
          this.btnLoading = true
          finishPayment(this.id)
            .then(res=>{
              this.btnLoading = false
              this.getData()
              this.$successMessage(res.message)
            })
        })
        .catch( () =>{

        })
    },
    resetPayment(){
      this.$warning(this.$t('data.settlementText2'),{
        title: this.$t('data.settlement')
      })
        .then( () => {
          this.btnLoading = true
          resetPayment(this.id)
            .then(res=>{
              this.btnLoading = false
              this.getData()
              this.$successMessage(res.message)
            })
        })
        .catch( () =>{

        })

    },
    downLoad(){
      this.downloadLoading = true
      getPaymentPdf(this.id)
        .then(res=>{
          this.downloadLoading = false
          if(res.error === 0){
            window.open(res.data.fileUrl,"_blank");
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    getSummaries1(param){
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        if(column.property === 'stickerPrice'){
          // sums[index] = this.data.totalStickerFee;
          sums[index] = this.data.totalStickerFee;
        }else if(column.property === 'num'){
          sums[index] = this.paymentOrderSumGoodsNum;
        }else if(column.property === 'spStickerPrice'){
          // sums[index] = this.data.totalSpStickerPrice;
          sums[index] = this.data.totalSpStickerPrice;
        }else if(column.property === 'stickerAppend'){
          // sums[index] = this.data.totalStickerAppend;
          sums[index] = this.data.totalStickerAppend;
        }else if(column.property === 'logisticTypePrice'){
          sums[index] = this.data.totalLogisticTypePrice;
        }else if(column.property === 'packagePrice'){
          sums[index] = this.data.totalPackagePrice;
        }else{
          sums[index] = '-'
        }
      });
      return sums;
    },
    getSummaries2(param){
      const { columns, data } = param;
      const sums = [];

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('table.sum');
          return;
        }
        if(index === columns.length - 1){
          sums[index] = data.reduce((prev, curr)=>{
            return prev + Number(curr.totalFee)
          },0)
        }else{
          sums[index] = data.reduce((prev,curr)=>{
            return prev + (curr[column.property] ? Number(curr[column.property].calNum) : 0)
          },0)
        }

      });
      return sums;
    },
    backList(){
      this.$router.push({
        name: 'settlementList'
      })
    }
  },

}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.footer{
  margin-top: 20px;
}
</style>
